<template>
	<div>
		<my-table ref="tableObj" queryBar oprable :oprs="oprs" :perPage="perPage" :totalRows="totalRows" :title="title"
		 :fields="fields" :items="items" :pagable="pagable" :index="indexable" :selectable="selectable" @table-page="tablePage"
		 @item-new="itemNew" @item-update="itemUpdate" @item-delete="itemDelete" @items-delete="itemsDelete" @item-view="itemView"
		 @table-alert-dismissed-success="getItems" @do-query="getItems" @do-reset-query="itemResetQuery">
			<template v-slot:primary-query>
				<b-form-group label="名称" label-cols-sm="3" label-align-sm="right" label-size="sm" label-for="query-name" class="mb-0 m-1">
					<b-input-group size="sm">
						<b-form-input v-model.trim="query.name" type="search" id="query-name" placeholder="请输入名称"></b-form-input>
					</b-input-group>
				</b-form-group>
			</template>
			<template v-slot:second-query>
				<b-form-group label="别名" label-cols-sm="3" label-align-sm="right" label-size="sm" label-for="query-alias-name"
				 class="mb-0 m-1">
					<b-input-group size="sm">
						<b-form-input v-model.trim="query.aliasName" type="search" id="query-alias-name" placeholder="请输入别名"></b-form-input>
					</b-input-group>
				</b-form-group>
			</template>
		</my-table>
	</div>
</template>

<script>
	import MyTable from '../commons/Table.vue'
	import axios from 'axios'
	import gl from '../commons/global_variable.js'

	export default {
		name: "Tags",
		components: {
			MyTable
		},
		data: function() {
			return {
				title: "标签列表",
				items: [],
				oprs: {
					new: true,
					update: true,
					cupdate: true,
					del: true,
					mdel: true,
					view: true
				},
				query: {
					name: '',
					aliasName: ''
				},
				pagable: true,
				perPage: 15,
				totalRows: 0,
				indexable: true,
				selectable: true,
				fields: [{
					key: "name",
					label: "名称"
				}, {
					key: "aliasName",
					label: "别名"
				}, {
					key: "articlesCount",
					label: "文章数量"
				}, {
					key: "remark",
					label: "描述"
				}]
			}
		},
		methods: {
			getItems: function() {
				var that = this
				axios.post(gl.cms_args.server_url + 'tag/list', {
					name: this.query.name,
					aliasName: this.query.aliasName,
					page: this.currentPage,
					size: this.perPage
				}).then(function(response) {
					if (response.data.code === gl.cms_args.success) {
						var data = response.data.data
						that.totalRows = data.total
						that.perPage = data.size
						that.items = data.records
						that.isBusy = false
					} else {
						that.$refs.tableObj.onQueryError()
					}
				}).catch(function(error) {
					that.$refs.tableObj.onQueryError()
				})
			},
			tablePage: function(pageObj) {
				this.currentPage = pageObj.currentPage
				this.perPage = pageObj.perPage
				this.getItems()
			},
			itemNew: function() {
				this.$router.push({
					name: "tag-details",
					params: {
						title: "新建"
					}
				})
			},
			itemUpdate: function(item) {
				this.$router.push({
					name: "tag-details",
					params: {
						title: "修改",
						tagId: item.id
					}
				})
			},
			itemView: function(item) {
				this.$router.push({
					name: "tag-details",
					params: {
						title: "查看",
						tagId: item.id,
						readonly: true
					}
				})
			},
			itemDelete: function(item) {
				var that = this
				axios.get(gl.cms_args.server_url + 'tag/del?id=' + item.id).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.$refs.tableObj.onDeleteSuccess()
					} else {
						that.$refs.tableObj.onDeleteError()
					}
				}).catch(function(error) {
					that.$refs.tableObj.onDeleteError()
				})
			},
			itemsDelete: function(items) {
				var ids = items.map(function(item) {
					return item.id
				})
				var that = this
				axios.post(gl.cms_args.server_url + 'tag/mdel', ids).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.$refs.tableObj.onDeleteSuccess()
					} else {
						that.$refs.tableObj.onDeleteError()
					}
				}).catch(function(error) {
					that.$refs.tableObj.onDeleteError()
				})
			},
			itemResetQuery: function(){
				this.query.name = ''
				this.query.aliasName = ''
				this.getItems()
			}
		},
		created: function() {
			this.$store.commit('menuFoucsOpr', 'tags')
			this.getItems()
		}
	}
</script>

<style>

</style>
